<script setup>
import RichTextEditor from '../../components/RichTextEditor.vue';
import SubmissionItem from '../../components/TeamworkSubmissionItem.vue';
import { defineAsyncComponent, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';

// rich text editor config 
const my_practice_text = ref('')
function textChange(newValue) {
    my_practice_text.value = newValue
}

// add appendix file
const add_appendix_file_ref = ref(null)
const add_img_top = ref(160)

const add_file_input_ref = ref(null)
const fileList = ref([])
function openFileExplorer(e) {
    e.stopPropagation();
    add_file_input_ref.value.click();

}

function addFiles() {
    const list = []
    for (let i = 0; i < add_file_input_ref.value.files.length; i++) {
        list.push(add_file_input_ref.value.files[i])
    }
    fileList.value = list.map(x => x)
}

function deleteFile(index) {
    fileList.value = fileList.value.filter((e, i) => i != index)
}

// modal

const MemberManagement = defineAsyncComponent(() => import('../../components/MemberManagementModal.vue'))
const Overview = defineAsyncComponent(() => import('../../components/OverviewModal.vue'))
const isOpenModal = ref(false)
const modalName = ref('')
function openModal(name) {
    isOpenModal.value = true;
    modalName.value = name;
}
function closeModal() {
    isOpenModal.value = false

}

// Route
const router = useRouter()
function goToInstructorComments() {
    const params = router.currentRoute.value.params
    router.push({name: "instructor_comments", params})
}


onMounted(() => {
    add_appendix_file_ref.value.addEventListener('scroll', (e) => {
        // 160是添加附件图片到顶部的距离
        add_img_top.value = e.target.scrollTop + 160
    });
})

</script>
<template>
    <div class="teamwork-container">
        <div class="teamwork">
            <div class="title-and-members">
                <div class="title">
                    <p>XXX课题</p>
                    <p>XXX团队</p>
                </div>
                <button type="button" @click="openModal('member_management')">成员管理</button>
            </div>
            <p>要求</p>
            <div class="requirement-container">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida
                dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient
                montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis
                orci, sed rhoncus pronin
                sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
                laoreet. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
                Proin gravida dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient
                montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis
                orci, sed rhoncus pronin
                sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
                laoreet. Proin
            </div>
            <p>附件</p>
            <div class="appendix-file">
                <ul>
                    <li v-for="item in 15"><a href="/src/assets/images/student/file.svg" download>file.svg</a></li>

                </ul>
            </div>
            <div class="teacher-evaluation">
                <p>老师评语</p>
                <button type="button" @click="goToInstructorComments" >详情</button>
            </div>
            <div class="teacher-evaluation-container">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida
                dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient
                montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis
                orci, sed rhoncus pronin
                sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
                laoreet. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
                Proin gravida dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient
                montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis
                orci, sed rhoncus pronin
                sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
                laoreet. Proin
            </div>
            <p id="teamwork">团队协作</p>
            <div class="submission-area">
                <p>提交区</p>
                <button type="button" @click="openModal('overview')" >总览</button>
            </div>
            <div class="submission-area-container">
                <SubmissionItem class="submission-item" />
                <SubmissionItem class="submission-item" />

            </div>
            <RichTextEditor class="rich-text-editor" @text-change="textChange" />
            <p>添加附件</p>
            <div class="add-appendix-file" ref="add_appendix_file_ref">
                <ul>
                    <li v-for="(file, index) in fileList" :key="index">{{ file.name }}<img
                            src="/src/assets/images/student/close.svg" alt="Delete" @click="deleteFile(index)" /></li>

                </ul>
                <img src="/src/assets/images/student/file-add.svg" alt="File add" width="32" height="32"
                    :style="{ top: add_img_top + 'px' }" @click="openFileExplorer" />
                <input type="file" ref="add_file_input_ref" style="display: none;" multiple @change="addFiles" />
            </div>
            <div class="buttons-container">
                <div class="right-buttons">
                    <button id="save-button">保存</button>
                    <button>提交</button>
                </div>
            </div>
        </div>
        <MemberManagement v-if="modalName == 'member_management'"  :is-open-modal="isOpenModal" @close-modal="closeModal" />
        <Overview v-if="modalName == 'overview'"  :is-open-modal="isOpenModal" @close-modal="closeModal" />
    </div>


</template>
<style scoped>
.teamwork-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.teamwork {
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    width: 1057px;
    /* height: 662px; */
    padding: 31px;
    margin: 50px 0;

}

.title-and-members,
.teacher-evaluation,
.submission-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.title {
    display: flex;
    align-items: center;
}

.title>p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    margin-right: 20px;
}

.title-and-members>button,
.teacher-evaluation>button,
.buttons-container>.right-buttons>button,
.submission-area>button {
    width: 120px;
    height: 36px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border: none;
    border-radius: 6px;
    color: #fafafa;
    text-align: center;
    cursor: pointer;
    line-height: 36px;
    font-size: 18px;
    padding: 0;
    font-family: Source Han Sans CN;
    user-select: none;
}

.title-and-members>button:hover,
.teacher-evaluation>button:hover,
.buttons-container>.right-buttons>button:hover,
.submission-area>button:hover {
    opacity: 0.85;
}

.title-and-members>button:active,
.teacher-evaluation>button:active,
.buttons-container>.right-buttons>button:active,
.submission-area>button:active {
    transform: translateY(3px);
}

.teamwork>p,
.teacher-evaluation>p,
.submission-area>p {
    font-family: Source Han Sans CN;
    color: #707070;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 6px;
}

.teacher-evaluation>p,
.submission-area>p {
    margin-bottom: 0;
}

.teamwork>p::after,
.teacher-evaluation>p::after,
.submission-area>p::after {
    content: ': ';
}

.requirement-container,
.teacher-evaluation-container {
    height: 144px;
    border: 1px solid #707070;
    padding: 12px;
    overflow: auto;
    color: #707070;
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 20px;
}

.appendix-file,
.add-appendix-file {
    height: 200px;
    border: 1px solid #707070;
    padding: 12px;
    overflow: auto;
    margin-bottom: 25px;
}

.appendix-file>ul>li,
.add-appendix-file>ul>li {
    list-style: none;
    height: 32px;
}


.appendix-file>ul>li::before,
.add-appendix-file>ul>li::before {
    content: url("/src/assets/images/student/file.svg");
    vertical-align: middle;
}

.teacher-evaluation {
    margin-bottom: 6px;
}

#teamwork {
    font-size: 26px;
    margin-bottom: 15px;
}

.submission-area-container {
    background-color: #ecedf0;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 6px 15px;
    margin-bottom: 20px;
}

.submission-area-container>.submission-item {
    margin: 10px 20px;
    padding-bottom: 10px;
}

.submission-area-container>.submission-item:not(:last-of-type) {
    border-bottom: #707070 solid 1px;
}


.rich-text-editor {
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.add-appendix-file>ul>li img {
    vertical-align: middle;
    margin-right: 50px;
    display: inline-block;
    transform: scale(0.6);
    cursor: pointer;
}

.add-appendix-file {
    position: relative;

}

.add-appendix-file img {

    position: absolute;
    right: 5px;
    cursor: pointer;
}

.buttons-container {
    display: flex;
    align-items: center;
    justify-content: end;
}

.buttons-container>.right-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 271px;
}

#save-button {
    background-color: #ecedf0;
    color: #707070;
}

.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
    z-index: 15;
}

.modal.open {
    display: block;
}

.modal-content-container {
    display: flex;
    width: 100%;
    /* height: 100%;*/
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: 837px;
    /*height: 491px;*/
    background-color: #ffffff;
    border: none;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    padding: 20px;
    margin: 50px 0;
}

.modal-header {
    display: flex;
    justify-content: end;
    align-items: center;
}

.modal-header>img {
    cursor: pointer;
    user-select: none;

}
</style>